<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SVG &lt;defs&gt; sprite preview | svg-sprite</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        color: #666;
        background: #fafafa;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        line-height: 1.4;
      }

      header {
        display: block;
        padding: 3em 3em 2em;
        background-color: #fff;
      }

      header p {
        margin: 2em 0 0;
      }

      section {
        border-top: 1px solid #eee;
        padding: 2em 3em 0;
      }

      section ul {
        margin: 0;
        padding: 0;
      }

      section li {
        display: inline-block;
        background-color: #fff;
        position: relative;
        margin: 0 2em 2em 0;
        vertical-align: top;
        border: 1px solid #ccc;
        padding: 1em 1em 3em;
        cursor: default;
      }

      .icon-box {
        margin: 0;
        width: 144px;
        height: 144px;
        position: relative;
        background: #ccc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23fff' d='M6 0h6v6H6zM0 6h6v6H0z'/%3E%3C/svg%3E") top left repeat;
        border: 1px solid #ccc;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

      .icon {
        display: inline-block;
      }

      h1 {
        margin-top: 0;
      }

      h2 {
        margin: 0;
        padding: 0;
        font-size: 1em;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: absolute;
        left: 1em;
        right: 1em;
        bottom: 1em;
      }

      footer {
        display: block;
        margin: 0;
        padding: 0 3em 3em;
      }

      footer p {
        margin: 0;
        font-size: .7em;
      }

      footer a {
        color: #0f7595;
        margin-left: 0;
      }
    </style>

<!--
Sprite shape dimensions
====================================================================================================
You will need to set the sprite shape dimensions via CSS when you use them as inline SVG, otherwise
they would become a huge 100% in size. You may use the following dimension classes for doing so.
They might well be outsourced to an external stylesheet of course.
-->

<style>
{{#shapes}} {{#selector.dimensions}}{{expression}}{{^last}}, {{/last}}{{/selector.dimensions}} { width: {{width.outer}}px; height: {{height.outer}}px; }
{{/shapes}}</style>

<!--
====================================================================================================
-->

  </head>
  <body>

<!--
Inline <defs> SVG sprite
====================================================================================================
This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
below within this document. Please see

  https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md#defs--symbol-mode

for further details on how to create this embeddable sprite variant.
-->

<svg width="0" height="0" style="position:absolute">
  <defs>
{{#shapes}}   {{{svg}}}
{{/shapes}} </defs>
</svg>

<!--
====================================================================================================
-->

    <header>
      <h1>SVG <code>&lt;defs&gt;</code> sprite preview</h1>
      <p>This preview features two methods of using the generated sprite in conjunction with inline SVG. Please have a look at the HTML source for further details and be aware of the following constraints:</p>
      <ul>
        <li>Your browser has to <a href="https://caniuse.com/svg-html5" target="_blank" rel="noopener noreferrer">support inline SVG</a> for these techniques to work.</li>
        <li>The embedded sprite (A) slightly differs from the generated external one. Please <a href="https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md#defs--symbol-mode" target="_blank" rel="noopener noreferrer">see the documentation</a> for details on how to create such an embeddable sprite.</li>
      </ul>
    </header>
    <section>

<!--
A) Inline SVG with embedded sprite
====================================================================================================
These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite
embedded above. They may be styled via CSS.
-->

      <h3>A) Inline SVG with embedded sprite</h3>
      <ul>

{{#shapes}}       <li title="{{name}}">
          <div class="icon-box">
            <svg viewBox="0 0 {{width.outer}} {{height.outer}}" class="{{#selector.dimensions}}{{#last}}{{#classname}}{{raw}}{{/classname}}{{/last}}{{/selector.dimensions}}">
              <use xlink:href="#{{name}}"></use>
            </svg>
          </div>
          <h2>{{name}}, {{ fileSize }}</h2>
        </li>
{{/shapes}}     </ul>

<!--
====================================================================================================
-->

    </section>
    <section>

<!--
B) Inline SVG with external sprite
====================================================================================================
These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external
SVG sprite. They may be styled via CSS.
-->

      <h3>B) Inline SVG with external sprite</h3>
      {{#inline}}<p>Please set the <code>inline</code> option to <code>false</code> in order to preview this method.</p>{{/inline}}{{^inline}}<ul>

{{#shapes}}       <li title="{{name}}">
          <div class="icon-box">
            <svg viewBox="0 0 {{width.outer}} {{height.outer}}" class="{{#selector.dimensions}}{{#last}}{{#classname}}{{raw}}{{/classname}}{{/last}}{{/selector.dimensions}}">
              <use xlink:href="{{{example}}}#{{name}}"></use>
            </shapes>
          </div>
          <h2>{{name}}, {{ fileSize }}</h2>
        </li>
{{/shapes}}     </ul>{{/inline}}

<!--
====================================================================================================
-->

    </section>
    <footer>
      <p>Generated at {{date}} by <a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.</p>
    </footer>
  </body>
</html>
